<template>
  <div class="visitor-list-wrapper">
    <div class="left" :class="{ 'left-hidden': !isOpen }">
      <div class="custom-table-list-wrapper">
        <div class="search" :class="{ active: toggleSearchStatus }">
          <el-form class="search-form" inline label-position="top">
            <el-form-item label="日期">
              <el-date-picker
                class="search-input"
                v-model="searchParams.date"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择"
                @change="initTableList(1)"
              />
            </el-form-item>
            <el-form-item label="关键词">
              <el-input
                class="search-input"
                v-model="searchParams.keywords"
                placeholder="请输入访客姓名、被访人员"
                :suffix-icon="Search"
                @keyup.enter="initTableList(1)"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="content">
          <div class="content-table">
            <el-table
              ref="tableRef"
              class="custom-table"
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChange"
            >
              <el-table-column prop="visitorName" label="访客姓名">
                <template #default="scope">
                  <el-popover placement="bottom" :width="320">
                    <template #reference>
                      <span class="link">{{ scope.row.visitorName }}</span>
                    </template>
                    <div class="popover-detail">
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-row>
                            <el-col :span="24">
                              <span class="label">访客姓名:</span>
                              <span class="value">{{ scope.row.name }}</span>
                            </el-col>
                            <el-col :span="24">
                              <span class="label">联系方式:</span>
                              <span class="value">{{ scope.row.name }}</span>
                            </el-col>
                            <el-col :span="24">
                              <span class="label">访问单位:</span>
                              <span class="value">{{ scope.row.name }}</span>
                            </el-col>
                            <el-col :span="24">
                              <span class="label">访问人员:</span>
                              <span class="value">{{ scope.row.name }}</span>
                            </el-col>
                            <el-col :span="24">
                              <span class="label">访问区域:</span>
                              <span class="value">{{ scope.row.name }}</span>
                            </el-col>
                            <el-col :span="24">
                              <span class="label">入园时间:</span>
                              <span class="value">{{ scope.row.name }}</span>
                            </el-col>
                            <el-col :span="24">
                              <span class="label">出园时间:</span>
                              <span class="value">{{ scope.row.name }}</span>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="12">
                          <el-image
                            class="table-img"
                            fit="cover"
                            :preview-src-list="[scope.row.fileUrl]"
                            preview-teleported
                            :src="scope.row.fileUrl"
                          />
                        </el-col>
                      </el-row>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="visitedUserName" label="被访人员" />
              <el-table-column prop="inTime" label="最新入园时间" width="70">
                <!-- <template #default="scope"></template> -->
              </el-table-column>
              <el-table-column
                prop="outTime"
                label="最新出园时间"
                width="70"
              ></el-table-column>
              <el-table-column label="操作" width="60px">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    @click="handleLocation(scope.row)"
                    ><svg-icon name="location" size="14px"
                  /></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="content-page">
            <el-pagination
              class="custom-pagination"
              :current-page="paginationParams.pageIndex"
              :page-size="paginationParams.pageSize"
              background
              layout="total, prev, pager, next"
              :total="total"
              @current-change="initTableList"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="button" @click="isOpen = !isOpen">
      <el-icon v-if="isOpen">
        <ArrowLeft color="#ffffff" :size="7" />
      </el-icon>
      <el-icon v-else>
        <ArrowRight color="#ffffff" :size="7" />
      </el-icon>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, nextTick } from 'vue'
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { useTableList } from '@/hooks/useTableList'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDict } from '@/hooks/useDict'
import { getVisitorRouteList } from '@/api/manager/visitorManage/visitorRoute.js'

const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
const searchParams = ref({
  type: '',
  status: '',
  keywords: '',
})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  // initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
  loading,
} = useTableList(searchParams, getVisitorRouteList)

const isOpen = ref(true)
const handleLocation = (row) => {}
const handleCurrentChange = (row) => {}

const tableRef = ref()
const initTableList = async (pageIndex) => {
  if (pageIndex) {
    paginationParams.value.pageIndex = pageIndex
  }
  const params = { ...searchParams.value, ...paginationParams.value }

  try {
    loading.value = true
    const res = await getVisitorRouteList(params)
    if (res.success) {
      total.value = res.data.count
      tableData.value = res.data.list
      nextTick(() => {
        tableRef.value.setCurrentRow(tableData.value[0])
      })
    } else {
      ElMessage.error(res.message)
    }
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}
onMounted(() => {
  initTableList(1)
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';
.search-input {
  width: 180px;
}
.visitor-list-wrapper {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  .left {
    width: 420px;
    height: 100%;
    background-color: #ffffff;
    transition: width 0.5s;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
    box-sizing: border-box;
    overflow: hidden;
    .search {
      width: 100%;
      box-shadow: none;
      margin-bottom: 0;
      height: auto;
      padding: 20px 0 0 20px;
      :deep(.search-form) {
        display: flex;
        flex-wrap: nowrap;
      }
    }
    .content {
      width: 100%;
      padding: 0 20px 20px 20px;
      .content-table {
        height: calc(100% - 52px);
      }
    }
  }
  .left-hidden {
    width: 0px;
    transition: width 0.5s;
  }
  .button {
    cursor: pointer;
    width: 14px;
    height: 56px;
    background: #d5deed;
    display: flex;
    align-items: center;
    position: relative;
    clip-path: polygon(0 0, 0 100%, 100% calc(100% - 10px), 100% 10px);
  }
}
.popover-detail {
  .el-col {
    // margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .label {
    font-weight: 400;
    font-size: 12px;
    color: #333333;
    line-height: 20px;
    display: inline-block;
    margin-right: 10px;
    text-align: right;
  }
  .value {
    flex: 1;
    display: inline-block;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #757575;
  }
  .table-img {
    width: 156px;
    height: 118px;
  }
}
</style>
